<template>
  <div class="pro-info">
    <n-popover trigger="hover" v-bind="popoverProps">
      <template #trigger>
        <div class="flex-ac">
          <icons name="i-info" size="20" v-bind="svgProps" />
        </div>
      </template>
      <!-- 模式一：slot渲染 -->
      <slot>
        <!-- 模式二：文件内容渲染 -->
        <div v-if="content" v-html="content"></div>
        <!-- 模式三：文字列表渲染，可选ol序号，也可选ul无序 -->
        <div v-else-if="contentList">
          <ol v-if="contentListType === 'ol'" style="padding-left: 20px">
            <li v-for="(content, index) in contentList" :key="index">
              {{ content }}
            </li>
          </ol>
          <ul v-else-if="contentListType === 'ul'" style="padding-left: 20px">
            <li v-for="(content, index) in contentList" :key="index">
              {{ content }}
            </li>
          </ul>
        </div>
      </slot>
    </n-popover>
  </div>
</template>

<script lang="ts" setup name="ProInfo">
  defineProps({
    // 文本内容 支持html
    content: {
      type: String,
      require: false
    },
    // 文本内容数组，渲染成ol或ul
    contentList: {
      type: Array,
      require: false
    },
    // 'ol' | 'ul' - 有序 | 无序
    contentListType: {
      type: String,
      default: 'ol'
    },
    svgProps: {
      type: Object,
      default: () => ({})
    },
    popoverProps: {
      type: Object,
      default: () => ({})
    }
  })
</script>

<style lang="less" scoped></style>
